<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
    aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <!-- <span>一般过程申请: {{ workflow.code }}</span> -->
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <ul class="nav nav-tabs  m-tabs-line" style="padding:0px 25px 0px 25px;">
                    <li class="nav-item m-tabs__item">
                        <p-tabMenu [model]="tabs" [activeItem]="tabs[0]">
                            <ng-template pTemplate="item" let-item let-i="index">
                                <div style="position: relative; text-align: center; min-width: 5em;">
                                    <div class="ui-menuitem-text" (click)="tabTypeClick(item.label,item.style)">
                                        {{ item.label }}
                                    </div>
                                </div>
                            </ng-template>
                        </p-tabMenu>
                    </li>
                </ul>
                <div class="modal-body">
                    <!-- <p-panel header="任务筛选" [toggleable]="true"> -->
                    <div *ngIf="index==1">
                        <!-- <div class="col-xl-12"> -->
                            <div class="form-group m-form__group">
                                <div class="input-group">
                                    <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                                        [placeholder]="l('SearchWithThreeDot')" type="text">
                                    <span class="input-group-btn">
                                        <button (click)="getPipes()" class="btn btn-primary"><i class="flaticon-search-1"
                                                [attr.aria-label]="l('Search')"></i></button>
                                    </span>
                                </div>
                            </div>
                        <!-- </div> -->
                        <div class="m-portlet__body">
                            <div class="row align-items-center" style="margin: 0;">
                                <div class="tab-content" style="width:100%;">
                                    <div class="tab-pane active">
                                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                            <div class="m-pipeline">
                                                <div class="table-responsive">
                                                    <table class="table" id="pipe-table">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 130px;">
                                                                    操作</th>
                                                                <th class="m-pipeline__base">基础信息</th>
                                                                <th class="m-pipeline__status">状态信息</th>
                                                                <th class="m-pipeline__time">完成时间</th>
                                                                <th class="m-pipeline__node">节点信息</th>
                                                                <th class="m-pipeline__action">工艺规程名称</th>

                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr *ngFor="let pipe of primengTableHelper.records">
                                                                <td style="width: 130px">
                                                                    <button (click)="joinTask(pipe)" class="btn btn-primary">
                                                                        <i class="fa fa-cog"></i><span class="caret"></span>
                                                                        加入
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <div class="row">
                                                                        <div class="col-md-6">
                                                                            <span class="m-pipeline__title">
                                                                                {{pipe.taskCode}}
                                                                            </span>
                                                                            <span class="m-pipeline__sub">
                                                                                {{pipe.modelCode}} {{pipe.batchString}}
                                                                            </span>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <span class="m-pipeline__title">
                                                                                {{pipe.drawingCode}}
                                                                            </span>
                                                                            <span class="m-pipeline__sub">
                                                                                {{pipe.taskName}}
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </td>

                                                                <td>
                                                                    <span class="m-badge m-badge--success m-badge--wide">
                                                                        {{pipe.statusName}}
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    <span>
                                                                        {{pipe.dueDatePlanned |
                                                                        momentFormat:'YYYY-MM-DD'}}
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    <span>
                                                                        {{pipe.actCode}} {{pipe.actName}}
                                                                    </span>
                                                                </td>
                                                                <td>

                                                                    <span *ngIf="pipe.techDocCode==null">
                                                                        暂未绑定工艺规程
                                                                    </span>
                                                                    <span *ngIf="pipe.techDocCode!=null">
                                                                        {{pipe.techDocCode}}
                                                                    </span>
                                                                </td>

                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <div class="primeng-paging-container">
                                                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                            #paginator (onPageChange)="getPipes($event)" [totalRecords]="primengTableHelper.totalRecordsCount">
                                                        </p-paginator>
                                                        <span class="total-records-count">
                                                            {{'总计:' + primengTableHelper.totalRecordsCount}} </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- </p-panel> -->
                    <!-- <p-panel header="批量任务反馈" [toggleable]="true" [collapsed]="true"> -->
                    <div *ngIf="index==2">
                        <div class="col-xs-6 text-right">



                            <button (click)="loadgw(this.selected)" class="btn btn-primary blue">
                                <i class="fa fa-plus"></i> 批量任务反馈
                            </button>

                        </div>
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <p-table [value]="selected" >
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th >基础信息</th>
                                        <th >状态信息</th>
                                        <th >完成时间</th>
                                        <th >节点信息</th>
                                        <th >工艺规程名称</th>
                                        <th >操作</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <span class="m-pipeline__title">
                                                        {{record.taskCode}}
                                                    </span>
                                                    <span class="m-pipeline__sub">
                                                        {{record.modelCode}} {{record.batchString}}
                                                    </span>
                                                </div>
                                                <div class="col-md-6">
                                                    <span class="m-pipeline__title">
                                                        {{record.drawingCode}}
                                                    </span>
                                                    <span class="m-pipeline__sub">
                                                        {{record.taskName}}
                                                    </span>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <span class="m-badge m-badge--success m-badge--wide">
                                                {{record.statusName}}
                                            </span>
                                        </td>
                                        <td>
                                            <span>
                                                {{record.dueDatePlanned | momentFormat:'YYYY-MM-DD'}}
                                            </span>
                                        </td>
                                        <td>
                                            <span>
                                                {{record.actCode}} {{record.actName}}
                                            </span>
                                        </td>
                                        <td>

                                            <span *ngIf="record.techDocCode==null">
                                                暂未绑定工艺规程
                                            </span>
                                            <span *ngIf="record.techDocCode!=null">
                                                {{record.techDocCode}}
                                            </span>
                                        </td>
                                        <td>
                                            <button pButton type="button" label="删除" class="ui-button-rounded ui-button-danger"
                                                (click)=" deletePipe(record)"></button>
                                        </td>
                                    </tr>

                                </ng-template>
                            </p-table>
                        </div>
                    </div>
                    <!-- </p-panel> -->
                    <!-- <p-panel header="反馈工时" [toggleable]="true" [collapsed]="true"> -->
                    <div *ngIf="index==3">
                        <div class="row work-shop-proc">
                            <!-- <div class="col-md-3 pr-0">
                                <div style="padding: 10px;">

                                </div>

                            </div> -->

                            <div class="col-md-12 pl-0">
                                <div style="padding: 10px;">
                                    <div class="alert alert-info">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="note note-success" style="padding: 11px;">
                                                    <h5 class="block"></h5>
                                                    <em>{{ procInfo.statusName }}</em>
                                                </div>
                                            </div>

                                        </div>
                                        <!-- <em>通过 <b>开始|暂停|完成|重置</b> 按钮来操作该工序...</em> -->
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <!-- <div class="h5" style="height: 30px;">设备选择</div> -->
                                            <div class="form-group row">
                                                <div class="col-4">
                                                    <p-multiSelect [options]="shebei" name="shebei" optionLabel="displayText"
                                                        [(ngModel)]="selectshebei" defaultLabel="请选择设备"></p-multiSelect>
                                                </div>
                                                <div class="col-8 gongzhuang">
                                                    <p-multiSelect name="gongzhuang" [options]="gongzhuang" optionLabel="displayText"
                                                        [(ngModel)]="selectgongzhuang" defaultLabel="请选择工装"></p-multiSelect>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">

                                            <p-table [value]="nodeWorker" [paginator]="true" [rows]="10">



                                                <ng-template pTemplate="caption">
                                                    人员及工时分配
                                                </ng-template>
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width:2em"></th>

                                                        <th>人员姓名</th>
                                                        <th>工时占比(%)</th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-rowData>
                                                    <tr>
                                                        <td style="height: 36px;"></td>

                                                        <td pEditableColumn>
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <p-dropdown [options]="users" [(ngModel)]="rowData.userName"
                                                                        [style]="{'width':'100%'}" optionLabel="name"
                                                                        name="userName" required>
                                                                    </p-dropdown>
                                                                </ng-template>
                                                                <ng-template pTemplate="output" required>


                                                                    {{rowData.userName.name}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td pEditableColumn>
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <p-spinner size="55" [(ngModel)]="rowData.timePercentage"
                                                                        [min]="0" [max]="100" name="timePercentage"></p-spinner>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{rowData.timePercentage}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="summary" let-rowData>
                                                    <div style="text-align:left">
                                                        <button type="button" pButton icon="fa fa-plus" (click)=" showDialogToAdd()"
                                                            label="新增"></button>


                                                    </div>
                                                </ng-template>
                                            </p-table>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- </p-panel> -->





                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
                        取消
                    </button>
                    <button type="submit" (click)="save()" class="btn btn-primary" [disabled]="!userForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i> <span>提交</span>
                    </button>
                </div>
            </form>
        </div>
    </div>


    <!-- <createordinaryform #createOrdinaryForm (modalSave)="getOutsourcing()"></createordinaryform> -->


</div>
<act-base #actBase (modalRun)="getPipes()"></act-base>
